// README
// There are two steps to adding a property:
// 1. Create a member variable to store your property
// 2. Add the get_ and set_ accessors for your property
// Remember that both are case sensitive!
/// <reference name="MicrosoftAjaxTimer.debug.js" />
/// <reference name="MicrosoftAjaxWebForms.debug.js" />
/// <reference name="AjaxControlToolkit.ExtenderBase.BaseScripts.js" assembly="AjaxControlToolkit" />
Type.registerNamespace("AjaxGrid");

AjaxGrid.GridView = function(element) {
    this._headerCssClass="";
    this._prevSelectedRow=null;
    this._currentSubDetailsRowID = null
    this._listData =null;
    //listElementID is the Table's ID 
    this._listElementID=null;
    this._columnSpecifications=null;
    this._expandSubRows=null;
    this._subRowDataExpression =null;
    this._subGridColumnSpecifications = null;
}

AjaxGrid.GridView.prototype = {
     get_listElementID : function() {
          return this._listElementID;
     },
     set_listElementID : function(value) {
       this._listElementID = value;
     },
     ///Use find("BehaviorID").get_columnSpecification(index) to get the value of the element at the index 
     get_columnSpecification : function(index) {
          if( this._columnSpecification.length<index) {
            alert('Array out of Bounds');
          }
          return this._columnSpecification[index];
     },
     ///Use find("BehaviorID").set_columnSpecification(index,<columnSpecification Object>) to set the value of the element at the index
     set_columnSpecification : function(index,value) {
          if( this._columnSpecification.length<index) {
            alert('Array out of Bounds');
          }
          this._columnSpecification[index] = value;
     },
     ///Use find("BehaviorID").get_columnSpecifications() to get the value for columnSpecifications
     get_columnSpecifications : function() {
          return this._columnSpecification[index];
     },
     ///Use find("BehaviorID").set_columnSpecifications(value) to set the value for columnSpecifications
     set_columnSpecifications : function(value) {
          this._columnSpecification = value;
     },
     ///Use find("BehaviorID").add_columnSpecification(<columnSpecification Object>) to add another element of columnSpecification
     add_columnSpecification : function(value) {
           this._columnSpecification,push( value );
     },
     get_expandSubRows : function() {
          return this._expandSubRows;
     },
     set_expandSubRows : function(value) {
          this._expandSubRows = value;
     },
     get_subRowDataExpression : function() {
          return this._subRowDataExpression;
     },
     set_subRowDataExpression : function(value) {
          this._subRowDataExpression = value;
     },
     get_subGridColumnSpecifications : function() {
          return this._subGridColumnSpecifications;
     },
     set_subGridColumnSpecifications : function(value) {
          this._subGridColumnSpecifications = value;
     },
     get_headerCssClass : function() {
          return this._headerCssClass;
     },
     set_headerCssClass : function(value) {
          this._headerCssClass = value;
     },
     get_listData  : function() {
         return this._listData ;
     },
     set_listData  : function(value) {
         this._listData  = value;
     },
    add_rowDataBound:function(handler) {
       this.get_events().addHandler('rowDataBound', handler);
    },
    remove_rowDataBound:function(handler) {
       this.get_events().removeHandler('rowDataBound', handler);
    },
    raiserowDataBound:function(eventArgs){
      var handler = this.get_events().getHandler('rowDataBound');
      if (handler) {
       handler(this, eventArgs);
       }
    },
    addHeaderRow : function(columnSpecifications) {
        var _headerRow = document.createElement("TR");
        for( var loopIndex =0 ;loopIndex < columnSpecifications.Columns.length ; loopIndex++ ) {
            _headerRow.appendChild( addHeaderColumn( columnSpecifications.Columns[loopIndex] ));  
        }
        return _headerRow; 
    },
    
    addHeaderColumn : function(columnSpecification) {
        var _headerColumnCell = document.createElement("TH");
        if( typeof(columnSpecification.Style)!== 'undefined'  ) {
         _headerColumnCell.style.width= columnSpecification.Style.Width;
        }
        if( typeof(columnSpecification.headerCssClass)!== 'undefined'  ) {
         _headerColumnCell.className = columnSpecification.headerCssClass;
        }
        _headerColumnCell.appendChild( document.createTextNode(columnSpecification.headerName) ) ;
        return _headerColumnCell;
    },
   renderTemplate:function(templateSpecification) {
    var _templatedRow = document.createElement("TR");
        for( var loopIndex =0 ;loopIndex < templateSpecification.Columns.length ; loopIndex++ ) {
           var _templatedCell  = document.createElement("TD");
            switch ( templateSpecification.Columns[loopIndex].type ) {
                    case "text" : _templatedCell.appendChild( document.createTextNode(templateSpecification.Columns[loopIndex].text) );break;
                    case "html" : _templatedCell.innerHTML = templateSpecification.Columns[loopIndex].html ;break;
            } 
           _templatedRow.appendChild( _templatedCell );  
        } 
    return _templatedRow; 
    },
    addExpandRow:function(subData,subDataTableId,subDetailsDivID) {
        var _dataColumnCell = document.createElement("TD");
        var _columnText = "Expand/Collapse";
        _dataColumnCell.appendChild( document.createTextNode( _columnText ) );
        var expandSubRowHandler = Function.createDelegate(this,BindSubGrid);
            $addHandler(_dataColumnCell,"click",expandSubRowHandler);
            //Add Exanpdo to hold the subDetails Rows
        _dataColumnCell._rowSubDetailData = subData; 
        _dataColumnCell._rowSubDetailTableID = subDataTableId;
        _dataColumnCell._rowsubDetailsDivID = subDetailsDivID;
        return _dataColumnCell;
    },
    addDataRow : function (columnSpecifications,rowData,rowId,subData,expandSubRows) {
       var _dataRow = document.createElement("TR");
       _dataRow.id = rowId;
           if( expandSubRows && subData!== null ) {
            //_dataRow.appendChild(addExpandRow(subData));
           }
        for( var loopIndex =0 ;loopIndex < columnSpecifications.Columns.length ; loopIndex++ ) {
            _dataRow.appendChild( addDataColumn( columnSpecifications.Columns[loopIndex],rowData,subData ));  
                
           }
       return _dataRow; 
    },
    addDataColumn :function(columnSpecification,rowData,subData) {
       var _dataColumnCell = document.createElement("TD");
       var _columnText = "";
       if( columnSpecification.noAction === true ) {
            _columnText = columnSpecification.dataText+" { "+subData.length+" } ";
            var expandSubRowHandler = Function.createDelegate(this,BindSubGrid);
            $addHandler(_dataColumnCell,"click",expandSubRowHandler);
            _dataColumnCell._rowSubDetailData = subData; 
            _dataColumnCell._rowSubDetailTableID = columnSpecification.subDataTableId;
            _dataColumnCell._rowsubDetailsDivID = columnSpecification.subDetailsDivID;
            _dataColumnCell.style.width= columnSpecification.Style.Width;
            }
       else {
            _columnText =  rowData[columnSpecification.dataFieldName];
            
       }    
    _dataColumnCell.appendChild( document.createTextNode( _columnText ) ); 
       return _dataColumnCell;
    },
    selectRow: function(rowElement) {
        if( _prevSelectedRow !== null) {
            _prevSelectedRow.className = _prevSelectedRow._origclassName;
        }
        _prevSelectedRow = rowElement;
        _prevSelectedRow._origclassName = _prevSelectedRow.className;
        _prevSelectedRow.className = "gridSelectedRowGB";
    },
    BindSubGrid:function (eventArgs){
      eventArgs = eventArgs === null ? eventArgs : window.event;  
      
      var cellElement = eventArgs.srcElement
      var rowElement = cellElement.parentElement;
      cellElement.className="";
      var _subDetailsData = cellElement._rowSubDetailData;
      var _tableElement   = cellElement._rowSubDetailTableID;
      var subDetailsDivID = cellElement._rowsubDetailsDivID;
      
      var currLocation = Sys.UI.DomElement.getLocation(rowElement);
      Sys.UI.DomElement.setLocation($get(subDetailsDivID), 
                                    currLocation.x+rowElement.firstChild.offsetWidth, 
                                    currLocation.y+rowElement.firstChild.offsetHeight);
                                    
      //if the SubDetails Grid is already shown , hide it 
      if( _currentSubDetailsRowID === cellElement ) {
        $get(subDetailsDivID).style.display =  $get(subDetailsDivID).style.display == "block" ?"none":"block" ;
      } else {
         $get(subDetailsDivID).style.display =  "block";
      }
      selectRow(rowElement);
      
      var columnSpecifications = {Columns:[{headerName:"ProductID",dataFieldName:"ProductID",noAction:false,Style:{Width:"60px"}},
                                        {headerName:"UnitPrice",dataFieldName:"UnitPrice",noAction:false,Style:{Width:"60px"}},
                                        {headerName:"ProductName",dataFieldName:"ProductName",noAction:false,Style:{Width:"120px"}},
                                        {headerName:"UnitsInStock",dataFieldName:"UnitsInStock",noAction:false,Style:{Width:"120px"}},
                                        {headerName:"QuantityPerUnit",dataFieldName:"QuantityPerUnit",noAction:false,Style:{Width:"140px"}},
                                        {headerName:"Discontinued",dataFieldName:"Discontinued",noAction:false,Style:{Width:"80px"}}]};
      BindGrid(_subDetailsData,"tblSubDataTable",columnSpecifications,false,"")
      _currentSubDetailsRowID = cellElement;
    },
    DataBind:function(){
      var parentElement = $get( listElementID );  
      //Add a new TBody
      parentElement.appendChild( document.createElement("TBODY"));
      //remove existing Rows:
      parentElement.tBodies[1].removeNode( true );
      var rowTemplates = { EmptyRowTemplate :
                            {Columns:[
                                    {type:"text",text:"No"},
                                    {type:"text",text:"Data"},
                                    {type:"html",html:"Available <img src='images/xmag.png'/>"}]
                              }
                         };
     
       parentElement.tBodies[1].appendChild( addHeaderRow( columnSpecifications ) ); 
       for( var loopIndex=0;loopIndex < listData.length ; loopIndex++ ) {
            parentElement.tBodies[1].appendChild( 
                addDataRow(columnSpecifications,
                            listData[loopIndex],
                            listElementID+"row"+loopIndex,
                            expandSubRows?listData[loopIndex][subRowDataExpression]:listData[loopIndex],
                            expandSubRows) );
       }
       
       if ( listData.length === 0 ) {
       parentElement.tBodies[1].appendChild( renderTemplate( rowTemplates.EmptyRowTemplate ) );
       }
    }
}
AjaxGrid.GridView.registerClass("AjaxGrid.GridView");